var tab_ul = document.querySelector(".heard-tab");
let nav_table = ["热门", "新闻", "公告", "活动", "赛事", "···"];
var tab_li_list = [];
for (let i = 0; i < nav_table.length; i++) {
  var tab_li = document.createElement("li");
  var tab_span = document.createElement("span");
  tab_li.innerText = nav_table[i];
  tab_li.dataset.index = i;
  tab_li.dataset.jndex = i;
  tab_span.innerText = nav_table[i];
  tab_ul.append(tab_li);
  // tab_li.className = 'ancmion'
    
//   console.log('',tab_li_list);
if (i == 0) {
    tab_li.className = 'ancmion';
    tab_li.style.color = '#AD9567';
  }
  if (i < 5) {
    tab_li.onmouseover = mouseOverFun;
    tab_li.onmouseout = mouseOutFun;
    tab_li.append(tab_span);
      tab_li_list.push(tab_li);
  }
}
//给元素添加下框，鼠标移入
var text_bottom = document.querySelector(".text-bottom");

function mouseOverFun() {
    text_bottom.style.right = 339*this.dataset.jndex + 'px';
    // console.log('',text_bottom,this.dataset.jndex);
  var that = this;
  for (let i = 0; i < tab_li_list.length; i++) {
    tab_li_list[i].classList.remove("ancmion");
    tab_li_list[i].style.color = "";
    tab_li_list[i].children[0].style.display = "none";
  }
  this.className = "ancmion";
    this.style.color = '#AD9567'
  //两秒显示白色span
  timeout = setInterval(function () {
    that.dataset.index++;
    console.log("", that.dataset.index);
    if (that.dataset.index == 1) {
      that.children[0].style.display = "block";
    }
  }, 1000);
    
    //找到ul
    // console.log('', text_list);
   
    // for (let j = 0; j < text_list.length; j++){
        
    // }
}
//鼠标移出，清除text_ul定时器
function mouseOutFun() {
  for (let i = 0; i < tab_li_list.length; i++) {
    tab_li_list[i].children[0].style.display = "none";
  }
  this.dataset.index = 0;
  clearInterval(timeout);
}

var newArr = [
  {
    name: "热门",
    head: "2022周年庆回城新鲜出炉噜噜噜噜噜",
    color: "#4D9CFF",
    tab: [
      "新闻:王者荣耀IP授权合作伙伴 张大仙首..",
      "新闻:王者荣耀IP授权合作伙伴 张大仙首..",
      "新闻:王者荣耀IP授权合作伙伴 张大仙首..",
      "新闻:王者荣耀IP授权合作伙伴 张大仙首..",
      "新闻:王者荣耀IP授权合作伙伴 张大仙首..",
      "新闻:王者荣耀IP授权合作伙伴 张大仙首..",
      "新闻:王者荣耀IP授权合作伙伴 张大仙首..",
    ],
    data: "09/06",
  },
  {
    name: "新闻",
    head: "9月1日全服不停机更新公告",
    color: "#1E96AB",
    tab: [
      "热门:陪你再战一万年!《乱世王者》携..",
      "热门:陪你再战一万年!《乱世王者》携..",
      "热门:陪你再战一万年!《乱世王者》携..",
      "热门:陪你再战一万年!《乱世王者》携..",
      "热门:陪你再战一万年!《乱世王者》携..",
      "热门:陪你再战一万年!《乱世王者》携..",
      "热门:陪你再战一万年!《乱世王者》携..",
    ],
    data: "09/21",
  },
  {
    name: "公告",

    head: "《天天爱消除》九周年生日快乐鸭!",
    color: "red",
      tab: ["公告:《天天爱消除》九周年生日快乐鸭!",
          "公告:《天天爱消除》九周年生日快乐鸭!",
          "公告:《天天爱消除》九周年生日快乐鸭!",
          "公告:《天天爱消除》九周年生日快乐鸭!",
          "公告:《天天爱消除》九周年生日快乐鸭!",
          "公告:《天天爱消除》九周年生日快乐鸭!",
          "公告:《天天爱消除》九周年生日快乐鸭!",
      ],
    data: "09/01",
  },
  {
    name: "活动",
    head: "2022周年庆回城新鲜出炉噜噜噜噜噜",
    color: "blue",
      tab: ["新闻:2022周年庆回城新鲜出炉噜噜噜噜噜",
          "新闻:2022周年庆回城新鲜出炉噜噜噜噜噜",
          "新闻:2022周年庆回城新鲜出炉噜噜噜噜噜",
          "新闻:2022周年庆回城新鲜出炉噜噜噜噜噜",
          "新闻:2022周年庆回城新鲜出炉噜噜噜噜噜",
          "新闻:2022周年庆回城新鲜出炉噜噜噜噜噜",
          "新闻:2022周年庆回城新鲜出炉噜噜噜噜噜",
      ],
    data: "09/11",
  },
  {
    name: "赛事",
    head: "蔡小姬探班手记|孙尚香-音你闪耀...",
    color: "yellow",
      tab: ["热门:蔡小姬探班手记|孙尚香-音你闪耀...",
          "热门:蔡小姬探班手记|孙尚香-音你闪耀...",
          "热门:蔡小姬探班手记|孙尚香-音你闪耀...",
          "热门:蔡小姬探班手记|孙尚香-音你闪耀...",
          "热门:蔡小姬探班手记|孙尚香-音你闪耀...",
          "热门:蔡小姬探班手记|孙尚香-音你闪耀...",
          "热门:蔡小姬探班手记|孙尚香-音你闪耀...",
      ],
    data: "09/03",
  },
];

var text_list = []
for (let i = 0; i < newArr.length; i++){
    var text_ul = document.createElement('ul');
    text_ul.dataset.index = i
    text_ul.className = 'text-ul';
    text_list.push(text_ul)
    var text_oneli = document.createElement('li')
    text_oneli.innerText = newArr[i].head;
    text_oneli.style.margin = '10px';
    text_oneli.style.background = '#414046'
    text_oneli.style.color = '#C0A95B'
    // text_oneli.style.height = '32px';
    text_oneli.style.lineHeight = '16px';
    text_oneli.style.padding = '9px';
    text_oneli.style.fontSize = '18px';
    text_ul.append(text_oneli)
    for (let j = 0; j < newArr[i].tab.length; j++){
        var text_li = document.createElement('li');
        var textSpan = document.createElement('span');//热门
        var text_cante = document.createElement('span');//中间内容
        var text_data = document.createElement('span');//后缀日期
        
        // console.log('',newArr[i].tab[j].split(':')[0]);

        textSpan.innerText = newArr[i].tab[j].split(':')[0];
        text_cante.innerText = newArr[i].tab[j].split(':')[1];
        text_data.innerText = newArr[i].data;
        
        textSpan.style.cursor = 'pointer'
        textSpan.style.color = newArr[i].color;
        textSpan.style.border = `1px solid ${newArr[i].color}`; 
        textSpan.style.padding = '2px';
        textSpan.style.margin = ' 0 8px 0 0';
        text_data.style.textAlign = 'end'
        text_cante.style.marginRight = '5px'
        text_li.append(textSpan,text_cante,text_data);
        text_ul.appendChild(text_li);
        text_data.style.position = 'absolute';
        text_data.style.right = '0'
    }
    
    text_bottom.append(text_ul);
}

// var textAll_ul = document.querySelector('.text-ul')
// text_bottom.style.transform = "translateX(-339px)";